<template>
	<view class="radio-box" :style="{ '--primary-current-bg': currentBg }">
		<view class="radio-box-item" v-for="(item,index) in list" @click="currentChange(index)">
			<view class="box-item-l">
				<view>{{ item.name }}</view>
				<input placeholder="填写其他的哦" v-if="item.type == 'input'" />
			</view>
			<view class="box-item-select" v-show="index == current">✔️</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const current = ref(0);
const list = ref([{
	name: 'China',
},{
	name: 'Japan'
},{
	name: 'Other',
	type: 'input'
}]);
const currentBg = ref('red');
const currentChange = (index) => {
	current.value = index;
}
</script>

<style lang="scss">
.radio-box {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	.radio-box-item {
		position: relative;
		.box-item-l {
			display: flex;
			gap: 40rpx;
			align-items: center;
		}
		.box-item-select {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
			color: var(--primary-current-bg);
		}
	}
}
</style>